<template>
  <div>
    <el-popover v-model="visible" placement="top" width="160">
      <p>Remove this user and restore it to normal?</p>
      <div style="text-align: right; margin: 0">
        <el-button
          size="mini"
          type="text"
          @click="visible = false"
        >Cancel</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="deleteFunc(row)"
        >Confirm</el-button>
      </div>
      <el-button
        slot="reference"
        v-permission="[
          'admin',
          'punish/remove',
        ]"
        style="margin-left:10px"
        type="text"
      >Remove</el-button>
    </el-popover>
  </div>
</template>

<script>
import { crud } from '@crud/crud'
import {
  punishRemove
} from '@/api/operations/user/punishList'
export default {
  mixins: [crud()],
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    deleteFunc(row) {
      punishRemove({ id: row.id }).then(res => {
        if (res.errorCode === 0) {
          this.$message({
            message: 'Removed successfully',
            type: 'success'
          })
          this.crud.refresh()
          this.visible = false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
